<template>
  <div class="app-content c6-container phm-from" style="padding:0;">
    <ContentForm>
      <div slot="searchform" class="form-top">
        <form action="">
          <p class="form-top-p">
            <el-select v-model="valuek.deptCode" clearable placeholder="选择供电段" @change="line">
              <el-option
                v-for="item in formz.selectSection"
                :key="item.value"
                :label="item.deptName"
                :value="item.deptCode" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.selectLin" clearable placeholder="选择线路">
              <el-option
                v-for="item in formz.selectLin"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-input v-model="valuek.trainNo" clearable placeholder="请输入机车号" />
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.status" style="width: 130px;" clearable placeholder="选择状态">
              <el-option
                v-for="item in formz.status"
                :key="item.value"
                :label="item.label"
                :value="item.code" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-date-picker
              v-model="valuek.selectShij"
              style="width: 250px;"
              class="input-long"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM" />
          </p>
          <p class="form-top-p">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getlist">查询</el-button>
            <el-button
              class="refresh-btn"
              size="mini"
              type="primary"
              icon="el-icon-refresh"
              @click="resetListQuery">重置</el-button>
          </p>
        </form>
      </div>
      <div slot="valueform" style="height: calc(100%);">
        <div class="h-flex" style="width:100%;height: calc(100%);">
          <div class="tree-box" style="height: calc(100%);">
            <div class="tree-title">5C在线装置</div>
            <el-tree
              ref="tree"
              highlight-current
              :data="treeList"
              @current-change="handleNodeClick" />
          </div>
          <div class="h-flex-elastic v-flex " style="margin-left:6px;height: calc(100%);">
            <div class="content">
              <el-table
                v-loading="loading"
                :data="alldata.records"
                height="100%"
                border
                stripe>
                <el-table-column
                  label="缩略图"
                  width="70">
                  <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                      <img
                        class="table-imghover"
                        :src="getcompressImage(scope.row.detectPicture)"
                        @error="handleImgError">
                      <div slot="reference" class="name-wrapper">
                        <img
                          class="table-img"
                          :src="getcompressImage(scope.row.detectPicture)"
                          @error="handleImgError">
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="section"
                  label="供电段"
                  sortable
                  width="100"
                  show-overflow-tooltip
                  align="center" />
                <el-table-column
                  prop="lineAttr.lineName"
                  label="线路"
                  sortable
                  width="100"
                  show-overflow-tooltip
                  align="center" />
                <el-table-column
                  prop="siteAttr.siteName"
                  label="区间"
                  sortable
                  width="100"
                  show-overflow-tooltip
                  align="center" />
                <el-table-column
                  prop="pillarAttr.pillarNum"
                  label="杆号"
                  sortable
                  width="100"
                  show-overflow-tooltip
                  align="center" />
                <el-table-column
                  prop="trainNo"
                  label="机车号码"
                  min-width="140"
                  sortable
                  show-overflow-tooltip
                  align="center" />
                <el-table-column
                  label="检测日期"
                  sortable
                  show-overflow-tooltip
                  align="center"
                  min-width="140">
                  <template slot-scope="scope">
                    {{ parseTime(scope.row.detectDate, '{y}-{m}-{d} {h}:{i}') }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="照片数"
                  sortable
                  show-overflow-tooltip
                  align="center"
                  min-width="140">
                  <template slot-scope="scope">
                    受电弓{{ scope.row.numGra }}张/机车号{{ scope.row.numberTra }}张
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态"
                  sortable
                  align="center"
                  width="70"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :class="scope.row.status?'corGreen':'corRed'">{{ scope.row.status?'已分析':'未分析' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="图片"
                  sortable
                  width="70"
                  align="center"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :class="scope.row.picIV?'corGreen':'corRed'">{{ scope.row.picIV?'有效':'无效' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="80"
                  align="center"
                  fixed="right">
                  <template slot="header">
                    操作
                  </template>
                  <template slot-scope="scope">
                    <a class="el-icon-view" @click="showDialog(alldata.records,scope.$index)" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="block">
              <Pagination
                :hidden="false"
                :total="total"
                :page.sync="queryParams.page"
                :size.sync="queryParams.size"
                @pagination="getlist" />
            </div>
          </div>
        </div>
      </div>
    </ContentForm>
    <div class="phm-tanc" :class="{ phmtancshow: isActive }">
      <p class="phm-tanc-top"><span class="el-icon-close" @click="isActive=!isActive" />5C数据查看</p>
      <A5C v-if="isActive" ref="inner" :show-pillar-pager="true" style="height: calc(100% - 42px);" />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import A5C from './A5cAnalysis.vue'
import { line, getListSection } from '@/api/cms/detect-data/basic'
import { getToken } from '@/utils/auth'
import { find5cDetectData, find5CDevice } from '@/api/cms/detect-data'
import ContentForm from '@/components/ContentForm'
export default {
  name: 'DetectData5C',
  components: {
    A5C,
    ContentForm
  },
  data() {
    return {
      parseTime: parseTime,
      loading: false,
      isActive: false,
      treeList: [],
      alldata: {},
      // 线路数据
      treedata: [],
      valuek: {
        deptCode: '',
        trainNo: '',
        selectShij: [],
        pillarCode: '',
        status: '',
        selectLin: '' // 选择线路
      },
      formz: {
        selectSection: [], // 所选得供电段
        selectLin: [],
        status: [{ code: 1, label: '已分析' }, { code: 0, label: '未分析' }]
      },
      total: 0,
      queryParams: {
        page: 1,
        size: 10
      }
    }
  },
  watch: {
    'valuek.deptCode': function(val) {
      this.valuek.selectLin = ''
      this.line(val)
      this.gettree(val)
    },
    'valuek.selectLin': function(val) {
      this.gettree(val)
    }
  },
  mounted() {
    // 获取当前年月,选择默认时间段 12个月
    // const year = new Date().getFullYear()
    // const month = new Date().getMonth()
    // const startdata = (Number(month) + 2) > 12 ? (Number(year) - 1) + '-01' : (Number(month) + 2) < 10 ? (Number(year) - 1) + `-0${(Number(month) + 2)}` : (Number(year) - 1) + `-${(Number(month) + 2)}`
    // const enddata = (Number(month) + 1) < 10 ? year + `-0${(Number(month) + 1)}` : year + `-${(Number(month) + 1)}`
    // this.valuek.selectShij = [startdata, enddata]
    getListSection().then(res => {
      const selectSection = []
      if (res.data) {
        res.data.forEach(item => {
          const section = {}
          section.deptCode = item.deptCode + '-' + item.deptName + '-' + item.id
          section.deptName = item.deptName
          selectSection.push(section)
        })
      }
      this.formz.selectSection = selectSection
    })
    this.line()
    this.getlist()
    this.gettree()
  },
  methods: {
    line(val) {
      var obj = {
        deptId: ''
      }
      if (val) {
        obj.deptId = val.split('-')[2]
      }
      line(obj).then(response => {
        // console.log('线路下拉框', response)
        const lines = []
        if (response.data) {
          response.data.forEach(item => {
            const line = {}
            line.value = item.lineId + '-' + item.lineCode
            line.label = item.lineName
            lines.push(line)
          })
        }
        this.formz.selectLin = lines
      })
    },
    // 判断图片类型并压缩
    getcompressImage(urlList) {
      var url = ''
      for (const item of urlList) {
        if (item.pictureType === '1') {
          url = item.filePath
        }
      }
      return process.env.VUE_APP_BASE_API +
        '/cms/detectC5Job/compressImage?path=' + url +
        '&access_token=' + getToken() +
        '&ppi=126'
    },
    gettree(val) {
      var obj = Object.assign({}, {
        lineCode: this.valuek.selectLin.split('-')[1] || '',
        deptCode: this.valuek.deptCode.split('-')[0] || ''
      })
      find5CDevice(obj).then(res => {
        this.treeList = res.data
      })
    },
    handleNodeClick(data, data1) {
      if (data1.level === 3) {
        this.valuek.pillarCode = data.id
        this.getlist()
      } else {
        this.valuek.pillarCode = ''
      }
    },
    showDialog(val, num) {
      this.isActive = true
      this.$nextTick(_ => {
        this.$refs.inner.getList(val, num)
      })
    },
    getimgList(url) {
      return [url]
    },
    // 获取数据列表
    getlist() {
      var obj = Object.assign({}, this.queryParams, {
        startTime: this.valuek.selectShij ? this.valuek.selectShij[0] || '' : '',
        endTime: this.valuek.selectShij ? this.valuek.selectShij[1] || '' : '',
        status: this.valuek.status,
        trainNo: this.valuek.trainNo,
        pillarCode: this.valuek.pillarCode,
        lineCode: this.valuek.selectLin.split('-')[1] || '',
        section: this.valuek.deptCode.split('-')[1] || ''
      })
      this.alldata = {}
      this.loading = true
      find5cDetectData(obj).then(res => {
        if (res.data) {
          this.alldata = res.data
          this.total = res.data.total
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    resetListQuery() {
      this.valuek = {
        selectSection: '',
        selectLin: [], // 选择线路
        selectShij: [] // 时间
      }
    }
  }
}
</script>

<style scoped lang="scss">
.input-long{
  width: 280px;
  ::v-deep .el-input__icon{
    line-height: 22px;
  }
}
</style>
<style scoped lang="scss">
.content{
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  height: 100%;
  align-content:flex-start;
}
.tree-title{
  height: 42px;
  line-height: 42px;
  color: white;
  background: #409eff;
  text-align: center;
}
.tree-box{
  width: 180px;
  flex-basis:180px;
  overflow-y: hidden;
  max-width: 180px;
  min-width: 180px;
  font-size: 14px;
  border: solid 1px #EBEEF5;
  .lineTree{
    overflow-x: scroll;
  }
  .line{
    background: #409eff;
    height: 42px;
    color: white;
    line-height: 42px;
    text-align: center;
  }
  ::v-deep .el-tree-node__content{
    padding: 0 10px;
    height: 40px;
    background: white;
  }
}
.innerdialog{
  ::v-deep .el-dialog{
    height: 100%;
    .el-dialog__header{
      padding: 0 16px;
      height: 0;
      background:#006fc5;
      .el-dialog__title{
        color: white;
        font-size: 16px;
      }
      .el-dialog__headerbtn{
        top: 22px;
        .el-icon-close{
          font-size: 20px;
          color: white;
        }
      }
    }
    .el-dialog__body{
      padding: 10px;
      height: calc(100%);
    }
  }
}
.table-img{
  position: absolute;
  top: 0;
  left: 0;
  height: 98%;
  width: 100%;
}
.corGreen{
    color: rgb(26, 194, 3);
}
.corRed{
    color: red;
}
::v-deep .el-table .el-table__row td .cell{
  height: 36px;
  line-height: 36px!important;
}
.table-imghover{
  height: 120px;
  width: 140px;
}
</style>
